<template xmlns="http://www.w3.org/1999/html">
  <div>
    <div>
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
               active-text-color="#ff9d00"
      >
        <el-menu-item >
          <span style="font-size: 30px; font-family: 楷体">
            评论
          </span>
          3
        </el-menu-item>
        <el-menu-item index="2" style="font-size: 20px">最热</el-menu-item>
        <el-menu-item index="3" style="font-size: 20px">最新</el-menu-item>
      </el-menu>
      <div class="line"></div>
    </div>
    <div style="margin-top: 10px; ">
      <CommentPublish :user="user" :placeholder="placeholder"></CommentPublish>
    </div>
    <div style="margin-top: 120px; ">
      <ul>
        <li v-for="item in comments">
          <Comment :comment="item"></Comment>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Comment from "@/components/Comment/FirstComment";
import SecondComment from "@/components/Comment/SecondComment";
import CommentPublish from "@/components/Comment/CommentPublish";
export default {
  name: "CommentComponent",
  components: {
    Comment,
    SecondComment,
    CommentPublish
  },
  data(){
    return{
      placeholder: "发一条友善的评论吧",
      user: {
        avatar: "https://p.qqan.com/up/2021-6/16246735796128385.png"
      }
    }
  },
  props:{
    comments: []
  },
  methods:{
    handleSelect(key, keyPath) {
      // 给sort排序字段赋值
      if (key == 1){
        alert("这是最热评论")
      }else{
        alert("这是最新评论")
      }
    }
  }
}
</script>

<style scoped>

</style>